<template>
    <van-pull-refresh v-model="isRefresh" @refresh="reLoad">
        <!--导航栏-->
        <bpm-nav-bar :title="title" :leftArrow="true" :toIndex="true"></bpm-nav-bar>

        <van-search shape="" background="#f3f3f3" placeholder="请输入搜索关键词"/>
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="loadData"
        >
            <van-cell-group>
                <van-cell v-for="data in dataSource" :key="data.id"
                          :value="timeColumn ? (data[timeColumn.colCode] || '') : ''"
                          @click="$emit('detailFromBusiness', data.id)">
                    <template #title>
                        <span v-if="titleColumn">{{data[titleColumn.colCode] || ''}}</span>
                    </template>
                    <template #label>
                        <p v-for="column in columns" :key="column.colCode">
                            {{column.colName}}：{{data[column.colCode] || ''}}</p>
                    </template>
                </van-cell>
            </van-cell-group>
        </van-list>
    </van-pull-refresh>
</template>

<script>

    import bpmNavBar from '../../components/bpmNavBar';

    export default {
        name: 'AppTaskRedirect',
        components: {
            bpmNavBar,
        },
        props: {
            title: String,
            viewShow: Object,
            myInstanceClassify: String,
        },
        data() {
            return {
                pageNo: 1,
                pageSize: 10,
                loading: false,
                finished: false,
                isRefresh: false,
                dataSource: [],
                titleColumn: null,
                timeColumn: null,
                columns: [],
                url: {
                    queryViewListPage: '/api/eform/engine/viewEngine/queryViewListPage',
                }
            }
        },
        created() {
            this.init();
        },
        methods: {
            reLoad() {
                this.pageNo = 1;
                this.finished = false;
                this.dataSource = [];
                this.loading = true;
                this.loadData();
            },
            loadData() {
                let url = this.url.queryViewListPage + "?viewCode=" + this.viewShow.viewCode + '&pageNo=' + this.pageNo + '&pageSize=' + this.pageSize;
                this.$mask.open();
                this.$http.post(url, {
                    // queryValue: queryValue,
                    myInstanceClassify: this.myInstanceClassify,
                }).then((res) => {
                    this.finished = res.result.total <= this.pageSize * this.pageNo;
                    this.pageNo++;
                    this.dataSource = [
                        ...this.dataSource,
                        ...res.result.records
                    ];
                }).catch((err) => {
                    this.$notify({type: 'warning', message: '请求失败: ' + err, duration: 2000,});
                }).finally(() => {
                    this.isRefresh = false;
                    this.loading = false;
                    this.$mask.close();
                });
            },
            init() {
                const columns = this.viewShow.tableShow.columnShow || [];
                this.titleColumn = columns.length > 0 ? columns[0] : null;
                this.timeColumn = columns.length > 1 ? columns[1] : null;
                this.columns = columns.filter((element, index) => index > 1);
                this.reLoad()
            },
        }
    }
</script>
